<template>
  <div>
    <el-form ref="form" :model="form" size="smal" label-width="120px">
      <el-form-item label="对外查询">
        <el-switch
          v-model="isOpen"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启中"
          inactive-text="关闭"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="查询条件">
        <el-select v-model="select1" filterable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="查询结果">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities" :label="city" :key="city" style="display: block">{{ city }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="查询地址" :inline="true">
        <el-input v-model="queryUrl" size="small" style="width: 50%" id="addressURL" disabled></el-input>
        &nbsp;
        <el-button type="text" id="copyBtn" @click="coryUrl">复制</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import clipboard from 'clipboard'
const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  data() {
    return {
      isOpen: true,
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      select1: '',
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      queryUrl: '111'
    }
  },
  name: 'outQueryForm',
  props: {
    queryParams: ''
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    coryUrl() {
      let _this = this
      let clipboard = new this.clipboard('.addressURL')
      clipboard.on('success', function () {
        _this.$toast('复制成功')
      })
      clipboard.on('error', function () {
        _this.$toast('复制失败')
      })
    }
  }
}
</script>